import {  loginApi } from '@/apis/user';
import styles from './login.module.scss'
import { UserOutlined } from '@ant-design/icons';
import { useNavigate } from "react-router-dom";
import {Form, Input,Button, message} from 'antd';
import { useRequest } from 'ahooks';
import { useStore } from '@/store';



const Login = ()=>{

  const navigate = useNavigate();
  const store = useStore()
  const {run} = useRequest(async(values)=>{
    const data=await loginApi(values)
    return data
  },{
    manual: true,
    
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    onSuccess: (res:any)=>{
      //保存token
      localStorage.setItem('token',res.token)
      store.setToken(res.token)      
      //重新加载页面
      setTimeout(()=>{
        message.success('登录成功')
      },0)
      //跳转
      navigate('/manage/list')
    
    }
  })

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const onFinish =async (values: any) => {
    console.log('Received values of form: ', values);
    run(values)
  }

  return (
    <div className={styles.container}>
      {/* 头部 */}
      <div className={styles.header}><UserOutlined style={{marginRight: '5px'}}/>用户登录</div>
      {/* 主体-表单 */}
      <div className={styles.form}>
        <Form  
        onFinish={onFinish}
        labelCol={{ span: 7 }}
        wrapperCol={{ span: 16 }}
        initialValues={{ remember: true }}>
          <Form.Item name="username" label="用户名："  rules={[{ required: true, message: '请输入用户名!' }]}>
            <Input size='middle'></Input>
          </Form.Item>
          <Form.Item name="password" label="密码："  rules={[{ required: true, message: '请输入密码!' }]}>
             <Input size='middle'></Input>
          </Form.Item>
          <Form.Item name="remember" valuePropName="checked" label="记住我"  >
            <Input style={{width: '20px'}} type="checkbox"></Input>
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 10, span: 20 }}>
               <Button  type="primary" htmlType="submit">
                  登录
                </Button>
          </Form.Item>


        </Form>
      </div>
    </div>
  )
}



export default Login;